﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MaterPage/Site.Master" AutoEventWireup="true" CodeBehind="JsMVC.aspx.cs" Inherits="Js_Study.JsMVC" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--<div style="width: 20px; height: 20px; background-color: red; position: absolute; top: 280px;"></div>--%>
    <div id="d1" style="width: 500px; height: 500px; border: 0.5px solid red; top: 100px; position: absolute; left: 100px;">
    </div>
    <script type="text/javascript">
        var ball = function (x, y, speed, w, h, deg) {

            this.friction = 0.0005;

            this.setWidth(w);
            this.setHeight(h);
            this.setPosition(x, y);
            this.setSpeed(speed);

            this.balls.push(this);

            //默认角度为30度
            this.deg = deg == undefined ? 30 : deg;
            //弧度和角度的转换 sin 和 cos 函数的参数为弧度
            this.radian = 2 * Math.PI / 360 * this.deg;

            this.speedX = Math.cos(this.radian) * (this.speed);
            this.speedY = Math.sin(this.radian) * (this.speed);
        }

        ball.prototype.setRadin = function (value) {
            this.radian = 2 * Math.PI / 360 * value;
        }

        ball.prototype.setSpeedXY = function (speed) {
            this.speedX = Math.cos(this.radian) * (speed);
            this.speedY = Math.sin(this.radian) * (speed);
        }

        ball.prototype.balls = [];

        ball.prototype.setWidth = function (value) {
            this.width = value == undefined ? 20 : value;
        }

        ball.prototype.setHeight = function (value) {
            this.height = value == undefined ? 20 : value;
        }

        ball.prototype.setSpeed = function (value) {
            if (value == undefined) {
                this.speed = 0;
                return;
            }
            this.speed = value;
        }

        ball.prototype.setPosition = function (x, y) {
            this.position = { x: x == undefined ? 0 : x, y: y == undefined ? 0 : y };
        }

        ball.prototype.bump = function (other) {
            var p1 = this.position;
            var p2 = { x: this.position.x + this.width, y: this.position.y };
            var p3 = { x: this.position.x, y: this.position.y + this.height };
            var p3 = { x: this.position.x + this.width, y: this.position.y + this.height };
            var p5 = other.position;
            var p6 = { x: other.position.x + other.width, y: other.position.y };
            var p7 = { x: other.position.x, y: other.position.y + other.height };
            var p8 = { x: other.position.x + other.width, y: other.position.y + other.height };

            if (p5.x > p1.x && p5.x < p2.x) {
                if (p5.y > p1.y && p5.y < p3.y) {
                    this.swapSpeed(other);
                }
            }

            if (p6.x > p1.x && p6.x < p2.x) {
                if (p6.y > p1.y && p6.y < p3.y) {
                    this.swapSpeed(other);
                }
            }

            if (p7.x > p1.x && p7.x < p2.x) {
                if (p7.y > p1.y && p7.y < p3.y) {
                    this.swapSpeed(other);
                }
            }

            if (p8.x > p1.x && p8.x < p2.x) {
                if (p8.y > p1.y && p8.y < p3.y) {
                    this.swapSpeed(other);
                }
            }
        }

        ball.prototype.swapSpeed = function (other) {
            var temp1 = this.speedX;
            var temp2 = other.speedX;

            this.speedX = temp2;
            other.speedX = temp1;

            var temp3 = this.speedY;
            var temp4 = other.speedY;

            this.speedY = temp4;
            other.speedY = temp3;
        }

        ball.prototype.move = function (time) {

            if (this.position.x > 580 || this.position.x < 100) {
                this.speedX = this.speedX * -1;
            }
            if (this.position.y < 100 || this.position.y > 580) {
                this.speedY = this.speedY * -1;
            }

            this.speed = this.speed * (1 - this.friction);

            this.position.x += this.speedX * time;
            this.position.y += this.speedY * time;

            for (var i = 0; i < this.balls.length; i++) {
                this.bump(this.balls[i]);
            }
        }

        var ballView = function (obj) {
            this.init();
        }

        ballView.prototype.init = function (container) {
            this.el = document.createElement("DIV");
            this.el.style.position = "absolute";
            this.el.style.top = "80px";
            document.body.appendChild(this.el);
        }

        ballView.prototype.setWidth = function (width) {
            this.el.style.width = width + "px";
        }

        ballView.prototype.setHeight = function (height) {
            this.el.style.height = height + "px";
        }

        ballView.prototype.setLeft = function (left) {
            this.el.style.left = left + "px";
        }

        ballView.prototype.setTop = function (top) {
            this.el.style.top = top + "px";
        }

        ballView.prototype.setColor = function (color) {
            this.el.style.backgroundColor = color;
        }

        ballView.prototype.update = function (leftValue, topValue) {
            this.el.style.left = leftValue + "px";
            this.el.style.top = topValue + "px";
        }

        var ballControl = function (ball, ballView) {
            this.model = ball;
            this.view = ballView;
            this.view.setHeight(this.model.height);
            this.view.setWidth(this.model.width);
            this.view.setTop(this.model.position.y);
            this.view.setLeft(this.model.position.x);
            //this.view.update();
        }

        ballControl.prototype.run = function () {
            this.model.move(0.05);
            this.view.update(this.model.position.x, this.model.position.y);
            var that = this;
            var _arg = arguments;
            window.requestAnimationFrame(function () { _arg.callee.apply(that, _arg); });
        }

        var b = new ball(190, 100, 5, 20, 20, 10);
        var bv = new ballView();
        bv.setColor("red");
        var bc = new ballControl(b, bv);
        bc.run();

        var b1 = new ball(130, 100, 10, 20, 20, 20);
        var bv1 = new ballView();
        bv1.setColor("skyblue");
        var bc1 = new ballControl(b1, bv1);
        bc1.run();

        var b2 = new ball(160, 100, 15, 20, 20, 30);
        var bv2 = new ballView();
        bv2.setColor("blue");
        var bc2 = new ballControl(b2, bv2);
        bc2.run();

        var b3 = new ball(100, 100, 50, 20, 20, 40);
        var bv3 = new ballView();
        bv3.setColor("yellow");
        var bc3 = new ballControl(b3, bv3);
        bc3.run();

        var b4 = new ball(210, 100, 50, 20, 20, 45);
        var bv4 = new ballView();
        bv4.setColor("green");
        var bc4 = new ballControl(b4, bv4);
        bc4.run();
    </script>
</asp:Content>
